import req from "../../../req.js"
import tabs from "../../../tabs.js"
import cfg from "../../../config.js"
import utils from "../../../utils.js"
import form_page from "../../../pagetype/form_page_type.js"

let page_type = {
    open: async function (page_info) {
        let property = page_info.property;
        let is_start = (property.action == "trigger"); //流程发起

        let process_id = property.process_id;
        let process_def_id = property.process_def_id;
        let process_def_name = property.process_def_name;
        let page_html_id = page_info.page_html_id;
        let login_info = page_info.login_info;
        $("#" + page_html_id).css("padding-top", "0.5rem").css("padding-bottom", "0.5rem");

        let starter = {};
        let process = null;
        let form_id = null;
        let title = null;
        let create_time = null;
        let diagram_xml = null;
        let todos = [];
        if (process_id) {
            let params = {
                datamodel: 164,
                tablename: "bpm_process",
                id: process_id
            }
            process = await req("datamodel/getrow", params) //process data
            starter.emp_name = process.starter_emp_name;
            starter.user_name = process.starter_user_name;
            starter.org_name = process.starter_org_name;
            starter.position_name = process.starter_position_name;
            starter.job_number = process.starter_job_number;
            process_def_id = process.def_id;
            title = process.name;
            form_id = process.form_id;
            create_time = process.create_time;
            diagram_xml = process.diagram;

            params = {
                datamodel: 165,
                tablename: "bpm_process_todo",
                filter: [
                    {
                        key: "process_id",
                        value: process_id,
                        like: false
                    }
                ]
            }
            let result = await req("datamodel/getrows", params) //todo data
            todos = result.rows;
        }

        let params = {
            datamodel: 112,
            tablename: "bpm_process_def",
            id: process_def_id
        }
        let def = await req("datamodel/getrow", params) //process def
        let f_deployment_id = def.f_deployment_id;
        let f_process_def_id = def.f_process_def_id;
        let form_page_id = def.form_id;
        let def_diagram = def.diagram;
        let def_config = def.config;
        let def_publish = def.publish;
        let def_version = def.version;
        process_def_name = def.name;
        if(!diagram_xml) diagram_xml=def_diagram;

        let form = await req("page/info", { "id": form_page_id }) //form page
        let form_page_info = {
            page_html_id: page_html_id,
            property: form.property,
            ext_js: form.ext_js,
            pageid: form_page_id,
            login_info: login_info,
            rights: [],
            params: []
        }
        let extension = {
            after_build_form_controls: function (add_form_controls) {
                add_form_controls.unshift(
                    {
                        type: "tpl",
                        "tpl": "<h4 style='margin-top: 0.3rem;margin-bottom:0rem;margin-left:0.25rem;font-weight:700;display: inline-block;'>" + process_def_name + "</h4>" +
                            (is_start ? "" : "<h5 style='margin-top: 0.3rem;margin-bottom:0rem;margin-left:0.25rem;display: inline-block;margin-left:1rem;'> NO." + process_id + "</h5>")
                    },
                    {
                        type: "input-text",
                        name: "_title",
                        value: title,
                        placeholder: "输入流程标题...",
                        required: true,
                        disabled: !is_start
                    },
                    {
                        "type": "divider"
                    },
                    {
                        type: "fieldSet",
                        title: "申请人信息",
                        body: [
                            {
                                type: "group",
                                controls: [
                                    {
                                        type: "input-text",
                                        label: "姓名",
                                        value: is_start ? login_info.emp_name : starter.emp_name,
                                        disabled: true
                                    },
                                    {
                                        type: "input-text",
                                        label: "工号",
                                        value: is_start ? login_info.job_number : starter.job_number,
                                        disabled: true
                                    },
                                    {
                                        type: "input-text",
                                        label: "部门",
                                        value: is_start ? login_info.org_name : starter.org_name,
                                        disabled: true
                                    },
                                    {
                                        type: "input-text",
                                        label: "岗位",
                                        value: is_start ? login_info.position_name : starter.position_name,
                                        disabled: true
                                    },
                                    {
                                        type: "input-text",
                                        label: "用户",
                                        value: is_start ? login_info.username : starter.user_name,
                                        disabled: true
                                    },
                                    {
                                        type: "input-text",
                                        label: "时间",
                                        value: is_start ? utils.dateFormat(new Date(), "YYYY-mm-dd HH:MM") : create_time,
                                        disabled: true
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "type": "divider"
                    },
                    {
                        type: "fieldSet",
                        title: "表单信息",
                        body: []
                    }
                );
                add_form_controls.push(
                    {
                        "type": "divider"
                    },
                    is_start ? {
                        type: "fieldSet",
                        title: "申请意见",
                        body: [
                            {
                                type: "group",
                                controls: [
                                    {
                                        type: "textarea",
                                        name: "_comment",
                                        placeholder: "输入申请意见...",
                                        required: true
                                    }
                                ]
                            }
                        ]
                    } : {
                        type: "fieldSet",
                        title: "审批意见",
                        body: [
                            {
                                type: "radios",
                                name: "_approve_result",
                                options: [
                                    {
                                        "label": "同意",
                                        "value": "agree"
                                    },
                                    {
                                        "label": "不同意",
                                        "value": "disagree"
                                    }
                                ],
                                required: true
                            },
                            {
                                type: "textarea",
                                name: "_comment",
                                placeholder: "输入审批意见...",
                                required: true
                            }
                        ]
                    }

                );
                return add_form_controls;
            },
            after_build_amis_json: function (json) {
                json.body.filter(c => c.name == "form").forEach(function (ele) {
                    ele.resetAfterSubmit = false;
                    ele.api = {
                        "method": "post",
                        "url": cfg.api_server + "bpm/process/approve",
                        "requestAdaptor": function (api) {
                            let newrow = api.data;
                            utils.handlepassword(newrow, property.columns);
                            api.data = {
                                row: newrow
                            }
                            api.data.f_deployment_id = f_deployment_id;
                            api.data.f_process_def_id = f_process_def_id;
                            api.data.process_def_id = process_def_id;
                            api.data.title = newrow._title; delete newrow._title;
                            api.data.comment = newrow._comment; delete newrow._comment;
                            api.data.datamodel = form.property.datamodel;
                            api.data.tablename = form.property.tablename;
                            //当前版本的配置需要保存，防止流程修改
                            api.data.config = def_config;
                            api.data.diagram = def_diagram;
                            api.data.publish = def_publish;
                            api.data.version = def_version;
                        }
                    }
                })
            },
            form_instance_id: form_id
        }
        form_page.open(form_page_info, extension);

        $("#" + page_html_id).append('\
            <!-- BPMN -->\
            <link rel="stylesheet" href="bpmn-js/dist/assets/diagram-js.css">\
            <link rel="stylesheet" href="bpmn-js/dist/assets/bpmn-font/css/bpmn.css">\
            <script src="bpmn-js/dist/bpmn-viewer.production.min.js"></script>\
            <style>\
                #' + page_html_id + ' .highlight:not(.djs-connection) .djs-visual > :nth-child(1) {\
                    fill: #91ffa2 !important; /* color elements as green */\
                }\
            </style>\
            <div class="col-md-4 col-sm-12 col-xs-12" style="margin-top:0.8rem;">\
                <div class="right-part">\
                    <div class="diagram-container" style="background-color: #f5f5f5; padding-bottom: 1rem; margin-bottom: 1.8rem;">\
                        <button type="submit" class="btn btn-info pull-right zoom-in" style=""><i class="fa fa-search-plus"></i></button>\
                        <div class="diagram" style="height: 16rem; clear: both; margin-bottom: 0.5rem;"></div>\
                    </div>\
                </div>\
                <div class="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:200000;width:100%;height:100%;display:none;">\
                    <div class="innerdiv" style="position:absolute; width:80%; height: 80%; margin-left: 10%; margin-top:5%; background-color:white;">\
                    <div class="diagram-big" style="width:100%;height:100%;padding:1rem;"></div>\
                    </div>\
                </div>\
            </div>');

        $("#" + page_html_id + " .right-part .zoom-in").click(async function () {
            $("#" + page_html_id + " .outerdiv").fadeIn("fast");
            //Diagram-big
            var bigViewer = new BpmnJS({
                container: "#" + page_html_id + " .diagram-big",
                keyboard: {
                    bindTo: window
                }
            });
            await bigViewer.importXML(diagram_xml);
            // access modeler components
            var bigCanvas = bigViewer.get('canvas');
            var bigOverlays = bigViewer.get('overlays');
            // zoom to fit full viewport
            bigCanvas.zoom("fit-viewport", "auto");
            //todo节点高亮显示
            if(is_start){
                bigCanvas.addMarker('StartEvent_1', 'highlight');
            }
            else{
                for(let todo of todos){            
                    bigCanvas.addMarker(todo.diagram_task_id, 'highlight');
                }
            }
        })

        $("#" + page_html_id + " .outerdiv").click(function () {
            $("#" + page_html_id + " .outerdiv").fadeOut("fast");
        })
        $("#" + page_html_id + " .innerdiv").click(function (event) {
            event.stopPropagation();
        })

        if (process_id) {
            $("#" + page_html_id + " .right-part").append('<div>\
                    <ul class="timeline">\
                    <li>\
                        <i class="fa fa-pencil bg-blue"></i>\
                        <div class="timeline-item">\
                            <span class="time"><i class="fa fa-clock-o"></i> 2021-8-14- 11:25:00</span>\
                            <h3 class="timeline-header">发起人 宋鹏</h3>\
                            <div class="timeline-body">申请意见</div>\
                        </div>\
                    </li>\
                    <li>\
                        <i class="fa fa-check bg-green"></i>\
                        <div class="timeline-item">\
                            <span class="time"><i class="fa fa-clock-o"></i> 2021-8-14- 11:25:00</span>\
                            <h3 class="timeline-header">主管审批 宋鹏 同意</h3>\
                            <div class="timeline-body">同意意见</div>\
                        </div>\
                    </li>\
                    <li>\
                        <i class="fa fa-close bg-red"></i>\
                        <div class="timeline-item">\
                            <span class="time"><i class="fa fa-clock-o"></i> 2021-8-14- 11:25:00</span>\
                            <h3 class="timeline-header">主管审批 宋鹏 不同意</h3>\
                            <div class="timeline-body">不同意意见</div>\
                        </div>\
                    </li>\
                    <li>\
                        <i class="fa fa-clock-o bg-gray"></i>\
                    </li>\
                </li>\
                </ul>\
            </div>');
        }
        //Diagram
        var bpmnViewer = new BpmnJS({
            container: "#" + page_html_id + " .right-part .diagram",
            keyboard: {
                bindTo: window
            }
        });
        await bpmnViewer.importXML(diagram_xml);
        // access modeler components
        var canvas = bpmnViewer.get('canvas');
        var overlays = bpmnViewer.get('overlays');
        // zoom to fit full viewport
        canvas.zoom("fit-viewport", "auto");
        //todo节点高亮显示
        if(is_start){
            canvas.addMarker('StartEvent_1', 'highlight');
        }
        else{
            for(let todo of todos){            
                canvas.addMarker(todo.diagram_task_id, 'highlight');
            }
        }

        $("#" + page_html_id + " .right-part>.diagram-container>.diagram>.bjs-container>a>svg").attr("width", 45).attr("height", 16);

        //提交成功框确认按钮
        $("#" + page_html_id + " .view-part").delegate(".form-success-confirm-button", "click", function () {
            tabs.closecurrent("tabs_container");
        });
    }
}

export default page_type;